<template>
	<view class="content">
		<view class="section section-0">
			<view class="section-body">
				<view class="top-tab">
					<view :class="`item ${curChartsTab.type === item.type ? 'item__active' : ''}`"
						@click="setCurChartsTab(item)" v-for="item in chartsTabList" :key="item.type">
						{{item.name}}
						<view class="shape"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-tabs :list="chartsTabList"></u-tabs> -->
		<view class="section section-1" v-if="showAction">
			<view class="item">
				<view class="left" @click="handleShowEdit()">+ 管理列表项</view>
				<view class="right">
					<text style="font-weight: bold;" class="iconfont icon-xiazai"></text>
					<text class="iconfont icon-quanping"></text>
				</view>
			</view>
		</view>
		<view class="section section-2">
			<view class="table-container">
				<!-- <view class="table-head">
					<view  v-for="(value, key) in curChartsTab.map">
						{{value.name}}
					</view>
				</view> -->
				<table border="0" cellspacing="0" cellpadding="0" style='width: 300px;'>
					<tr>
						<th style='width: 63px;' v-for="(value, key) in curChartsTab.map">
							{{value.name}}
						</th>
					</tr>		
					<tr v-for="(item,index) in listMap[curChartsTab.type]">
						<td v-for="(value, key) in curChartsTab.map" >
							{{item[key] == '' ? '/' : value.filter(item[key])}}
						</td>
					</tr>
				</table>
			</view>
		</view>
		<view class="section section-3" v-if="showEdit">
			<view class="section-body">
				<view class="top-tab">
					<view class="item item__active" >
						选择列表项
						<view class="shape"></view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, idx) in 6">
						<view class="left">name{{idx}}</view>
						<view class="right" @click="handleSelect(idx)">
							<view :class="`check ${selectedList.indexOf(idx) !== -1 ? 'check__on' : ''}`">
								<view class="iconfont icon-duigou"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="custom-button" @click="handleCloseEdit()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	const nodeMap = {
		// project_name: {
		// 	name: '项目名称',
		// 	filter: (val) => val
		// },
		plan_name: {
			name: '计划名称',
			filter: (val) => val
		},
		start_time: {
			name: '开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_time: {
			name: '结束时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		work_time: {
			name: '工作时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		zrr_name: {
			name: '责任人',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		phr_name: {
			name: '配合人',
			filter: (val) => val
		},
	}
	const planMap = {
		// project_name: {
		// 	name: '项目名称',
		// 	filter: (val) => val
		// },
		paper_ml: {
			name: '卷册目录',
			filter: (val) => val
		},
		paper_name: {
			name: '卷册名称',
			filter: (val) => val
		},

		paper_fzr: {
			name: '卷册负责人',
			filter: (val) => val
		},

		paper_ctr: {
			name: '催图人',
			filter: (val) => val
		},

		paper_time: {
			name: '出图时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		remark: {
			name: '备注',
			filter: (val) => val
		},
	};

	const materialMap = {
		// project_name: {
		// 	name: '项目名称',
		// 	filter: (val) => val
		// },
		wz_detail: {
			name: '物资描述',
			filter: (val) => val
		},
		sb_time: {
			name: '上报时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		yjzb_time: {
			name: '预计中标时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		tzqr_time: {
			name: '图纸确认时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		xcxq_time: {
			name: '现场需求时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		ccys_time: {
			name: '出场验收时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		wzgy_time: {
			name: '物资供应时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		tbr: {
			name: '提报人',
			filter: (val) => val
		},
		wl_no: {
			name: '物资编码',
			filter: (val) => val
		},
		supplier: {
			name: '中标厂家',
			filter: (val) => val
		},
		supplier_link_name: {
			name: '联系人',
			filter: (val) => val
		},
		supplier_link_phone: {
			name: '联系电话',
			filter: (val) => val
		},
		wl_no: {
			name: '物资编码',
			filter: (val) => val
		},
		ht_count: {
			name: '物资数量',
			filter: (val) => val
		},
		measure_dw: {
			name: '度量单位',
			filter: (val) => val
		},
	};

	const powerMap = {
		// project_name: {
		// 	name: '项目名称',
		// 	filter: (val) => val
		// },
		// p_name: {
		// 	name: '输变电工程名称',
		// 	filter: (val) => val
		// },
		sb_name: {
			name: '停电设备',
			filter: (val) => val
		},
		start_date: {
			name: '计划开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_date: {
			name: '计划结束时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		start_date_year: {
			name: '年度计划开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_date_year: {
			name: '年度计划结束时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		td_day: {
			name: '停电天数',
			filter: (val) => val
		},
		work_detail: {
			name: '工作内容',
			filter: (val) => val
		},
		gc_fl: {
			name: '工程分类',
			filter: (val) => val
		},
		gc_xz: {
			name: '工程性质',
			filter: (val) => val
		},
		sb_type: {
			name: '停电设备类型',
			filter: (val) => val
		},
		work_dw: {
			name: '工作单位',
			filter: (val) => val
		},
		xg_jl: {
			name: '修改记录',
			filter: (val) => val
		},
		xtc_yj: {
			name: '系统处意见',
			filter: (val) => val
		},
		gx_reason: {
			name: '更新原因',
			filter: (val) => val
		},
		factory_stations: {
			name: '厂站',
			filter: (val) => val
		},
		is_high_risk: {
			name: '是否为五级电网事件风险',
			filter: (val) => val
		},
		risk_desc: {
			name: '五级电网事件风险描述',
			filter: (val) => val
		},
	
	};
	const buildMap = {
		node_name: {
			name: '工序节点名1',
			filter: (val) => val
		},
		node_name2: {
			name: '工序节点名2',
			filter: (val) => val
		},
		start_date: {
			name: '开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_date: {
			name: '结束时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		duration: {
			name: '工期',
			filter: (val) => val + '天'
		},
		sg_dw_zrr: {
			name: '施工单位负责人',
			filter: (val) => val
		},
		zmb_zrr: {
			name: '项目部负责人',
			filter: (val) => val
		},
	};
		const riskMap = {
		work_type: {
			name: '作业类型',
			filter: (val) => val
		},
		bid_section: {
			name: '标段名称',
			filter: (val) => val
		},
		risk_no: {
			name: '风险编号',
			filter: (val) => val
		},
		work_order: {
			name: '工序',
			filter: (val) => val
		},
		risk_prediction: {
			name: '风险可能导致的后果',
			filter: (val) => val
		},
		risk_level: {
			name: '风险等级',
			filter: (val) => val
		},
		work_position: {
			name: '作业部位',
			filter: (val) => val
		},
		work_name: {
			name: '作业票名称',
			filter: (val) => val
		},
		address: {
			name: '地理位置',
			filter: (val) => val
		},
		start_time: {
			name: '计划开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_time: {
			name: '计划完成时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		start_time_real: {
			name: '实际开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_time_real: {
			name: '实际完成时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		// gk_measure: {
		// 	name: '管控措施',
		// 	filter: (val) => val
		// },
		bc_measure: {
			name: '流程状态',
			filter: (val) => val
		},
	};
	import {
		planApi,
		paperApi,
		powerApi,
		materialApi,
		buildApi,
		getRiskProspectus
	} from '@/api/project.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				showAction: true,
				showEdit: false,
				statusBarHeight: 0,
				chartsTabList: [{
						name: '关键节点',
						type: 'node',
						map: nodeMap,
					},
					{
						name: '施工计划',
						type: 'build',
						map: buildMap,
					},
					{
						name: '设计计划',
						type: 'plan',
						map: planMap,
					},
					{
						name: '物资计划',
						type: 'material',
						map: materialMap,
					},
					{
						name: '停电计划',
						type: 'power',
						map: powerMap,
					},
					{
						name: '风险计划',
						type: 'risk',
						map: riskMap,
					},
				],
				curChartsTab: {
					name: '关键节点',
					type: 'node',
					map: nodeMap,
				},
				selectedList: [],
				listMap: {
					node: [],
					plan: [],
					power: [],
					material: [],
					build: [],
					risk: []
				}
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		methods: {
			videoErrorCallback(e) {
				console.log(e);
			},
			handleShowEdit() {
				this.showEdit = true;
			},
			handleCloseEdit() {
				this.showEdit = false;
			},
			handleSelect(id) {
				const idx = this.selectedList.indexOf(id);
				if (idx === -1) {
					this.selectedList.push(id);
				} else {
					this.selectedList.splice(idx, id);
				}
			},
			setCurChartsTab(item) {
				this.curChartsTab = item;
			},
			async getTable() {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data: node
				} = await planApi({
					project_id: this.id
				});
				const {
					data: plan
				} = await paperApi({
					project_id: this.id
				});
				const {
					data: power
				} = await powerApi({
					project_id: this.id
				});
				const {
					data: material
				} = await materialApi({
					project_id: this.id
				});
				const {
					data: build
				} = await buildApi({
					project_id: this.id
				});
				 const {
					data: risk
				} = await getRiskProspectus({project_id: this.id});
				this.listMap.node = node.data || [];
				for (var i = 0; i < this.listMap.node.length; i++) {
					if (this.listMap.node[i].end_time != null) {
						this.listMap.node[i].end_time = this.listMap.node[i].end_time.substring(0, 10)
					}
					if (this.listMap.node[i].start_time != null) {
						this.listMap.node[i].start_time = this.listMap.node[i].start_time.substring(0, 10)
					}
				}
				this.listMap.plan = plan.data || [];
				this.listMap.power = power.data || [];
				this.listMap.material = material.data || [];
				this.listMap.build = build.data || [];
				this.listMap.risk = risk.data.data || [];
				// for (var i = 0; i < this.listMap.build.length; i++) {
				// 	if(this.listMap.build[i].start_date != null){
				// 		this.listMap.build[i].start_date = this.listMap.build[i].start_date.substring(0,10)
				// 	}
				// 	if(this.listMap.build[i].end_date != null){
				// 		this.listMap.build[i].end_date = this.listMap.build[i].end_date.substring(0,10)
				// 	}
				// }
				uni.hideLoading();
			}

		},
		onLoad(data) {
			// this.id = "63ffca27-3fb9-4070-a546-59f9b03a6361";
			// return;
			if (data.id) {
				this.id = data.id;
				this.showAction = false;
			} else {
				this.id = this.curProject.id
				this.showAction = true;
			}
		},
		onReady() {
			const res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
			this.getTable();
		}
	}
</script>

<style lang="scss" scoped>
	.check {
		box-sizing: border-box;
		border-radius: 50%;
		width: 42rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		background-color: #d8d8d5;

		.iconfont {
			font-size: 24rpx;
			color: #fff;
			display: none;
		}
	}

	.check__on {
		background-color: #2e5efe;

		.iconfont {
			display: block;
		}
	}

	.section-2 {
		width: 100%;
		.table-container {
			width: 100%;
			box-sizing: border-box;
			// padding: 0 40rpx;
			overflow-x: auto;
			height: calc(100vh - 105rpx);
			margin-top: 25rpx;
			overflow:auto;
			table {
				width: 100%;
				table-layout: fixed;
				border-top: 1rpx solid #ebebeb;
				border-left: 1rpx solid #ebebeb;
				th {				
					font-size: 26rpx;
					color: #3b3c40;
					text-align: left;
					word-break: keep-all;
					white-space: nowrap;
					background-color: #e2eefe;
					padding: 30rpx 60rpx;
					text-align: center;
					border-bottom: 1rpx solid #ebebeb;
					border-right: 1rpx solid #ebebeb;
					position: sticky;
					top: 0;
					overflow: auto;
				}
				tr {
					th{
						&:nth-child(1){
							position: sticky;
							left: 0;
							top: 0;
							z-index: 15;
						}
					}
					td{
						&:nth-child(1){
							position: sticky;
							left: 0;
							z-index: 10;
						}
					}
				}
				td {
					font-size: 22rpx;
					color: #compare;
					// white-space: pre-line;  //合并空白符序列，但是保留换行符
					// word-wrap: break-word; //在长单词或+URL+地址内部进行换行
					// word-break: break-all; //允许在单词内换行
					// word-break: keep-all;
					// white-space: nowrap;
					text-align: left;
					padding-right: 20rpx;
					padding: 20rpx;
					border-bottom: 1rpx solid #ebebeb;
					border-right: 1rpx solid #ebebeb;
					text-align: center;
					background-color: #fff;
					overflow: auto;
				}
			}
		}
	}

	.section-1 {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		padding-top: 45rpx;
		padding-bottom: 0;

		.item {
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			@include common-box-shadow;
			box-sizing: border-box;
			padding: 0 40rpx;

			.left {
				float: left;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 100rpx;
				letter-spacing: 0rpx;
				color: #1534ce;
			}

			.right {
				float: right;
				font-weight: normal;
				font-stretch: normal;
				line-height: 100rpx;
				letter-spacing: 0rpx;
				color: #1534ce;

				text {
					font-size: 30rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.section-0 {
		width: 100%;
		background-color: #3a5df5;

		.section-body {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 40rpx;
			padding-top: 18rpx;

			.top-tab {
				width: 100%;
				height: 52rpx;
				line-height: 52rpx;
				display: flex;
				justify-content: space-between;

				border-bottom: solid 3rpx #f2f2f0;

				.item {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 50rpx;
					letter-spacing: 0rpx;
					color: #d8d8d5;
					position: relative;

					.shape {
						opacity: 0;
						transform: translateY(6rpx);
						position: absolute;
						bottom: -6rpx;
						width: 100%;
						height: 8rpx;
						background-color: #1534ce;
						border-radius: 8rpx;
						transition: 0.3s ease;
					}
				}

				.item__active {
					color: #3b3c40;

					.shape {
						opacity: 1;
						transform: translateY(0rpx);
					}
				}
			}
		}
	}

	.section-3 {
		@extend .section-0;
		position: fixed;
		left: 0;
		z-index: 50;
		top: 0;
		background: #3a5df5;
		width: 100%;
		height: 100vh;

		.section-body {
			height: 100vh;

			.list {
				@include clear();
				width: 100%;
				padding-top: 40rpx;
				padding-bottom: 80rpx;

				.item {
					width: 327rpx;
					height: 100rpx;
					float: left;
					background-color: #ffffff;
					border-radius: 35rpx;
					@include common-box-shadow;
					box-sizing: border-box;
					padding: 0 40rpx;
					padding-right: 20rpx;
					margin-bottom: 24rpx;
					margin-right: calc(100% - 327rpx * 2);

					&:nth-child(even) {
						margin-right: 0;
					}

					.left {
						float: left;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 100rpx;
						letter-spacing: 0rpx;
						color: #45464a;
					}

					.right {
						float: right;
						font-weight: normal;
						font-stretch: normal;
						line-height: 100rpx;
						letter-spacing: 0rpx;
						color: #1534ce;

						text {
							font-size: 30rpx;
							margin-left: 30rpx;
						}

						.check {
							margin-top: 29rpx;
						}
					}
				}
			}
		}
	}
</style>
